<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				padding: 0;
				margin: 0;
				list-style: none;
				text-decoration: none;
			}
			
			.nav {
				width: 200px;
				height: 100%;
				position: fixed;
				top: 0;
				left: -200px;
				z-index: 6;
				background: #333;
				transition: 0.3s 0.3s;
		
			}
			.nav.on{
				left: 0;
			}
			.banber {
				height: 500px;
				width: 100%;
				background: url(images/banner.jpg) no-repeat center;
			}
			.nav .list {
				padding: 30px;
			}
			.nav .list li{
				text-align: center;
			}
			.nav .list a{
				line-height: 2rem;
				color: #ccc;
				font-size: 14px;
			}
			.nav .list a:hover{
				cursor: pointer;
				color: #fff;
			}
			.nav .btn{
				width: 40px;
				height: 40px;
				background: #333;
				position:absolute;
				right:-60px;
				top: 20px;
				cursor: pointer;

			}
			.nav .btn i{
				display: block;
				width: 18px;
				height: 2px;
				background: #fff;
				position: absolute;
				left: 11px;
				transition: 0.3s;
			}
			.nav .btn i:nth-child(1){
				top: 13px;
				transform-origin:left bottom;
				-webkit-transform-origin:left bottom
			}
			.nav .btn i:nth-child(2){
					top: 19px;
				
			}
			.nav .btn i:nth-child(3){
				top: 25px;
					transform-origin:left bottom;
				-webkit-transform-origin:left top
				
			}
			.nav .ft {
				position: absolute;
				bottom:30px;
				left: 0;
				width: 100%;
				text-align: center;
			}
			.nav .ft img{
				width: 100px;
			}
			.nav .btn.on i:nth-child(1){
				transform: rotate(40deg);
				-webkit-transform: rotate(40deg);
			}
			.nav .btn.on i:nth-child(2){
			 opacity: 0;
			}
			.nav .btn.on i:nth-child(3){
				transform: rotate(40deg);
				-webkit-transform: rotate(-40deg);
			}
		.bg{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 5;
			display: none;
			background: rgba(0,0,0,0.5);
		}
	
		</style>
	</head>

	<body>
		<div class="nav">
			<div class="list">
				<ul>
					<li>
						<a href="">首页</a>
					</li>
					<li>
						<a href="">职业课程</a>
					</li>
					<li>
						<a href="">随便练练</a>
					</li>
					<li>
						<a href="">高级教程</a>
					</li>
					<li>
						<a href="">努力学习 </a>
					</li>
				</ul>
			</div>
			<div class="btn">
				<i></i>
				<i></i>
				<i></i>
			</div>
			<div class="ft">
							<img src="images/2-160123095601538.jpg" alt="">
			</div>
		</div>
		<div class="banber">

		</div>
		<div class="bg">
			
		</div>
	</body>
<script type="text/javascript" src="js/jquery-1.11.3.min.js" ></script>
<script>
	var btn = $('.nav .btn,.bg');
	btn.click(function(){
		$('.nav .btn').toggleClass('on');
		$('.nav').toggleClass('on')
		$('.bg').delay(300).fadeToggle()
	})
</script>
</html>